<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>惠农网 - 购物车</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/my.css" />
</head>
<body>
<div class="container">
    <%@include file="common/header.jsp"%>
    <div class="row upDown">
        <form action="javascript:post('${pageContext.request.contextPath}/f-product/addCar',localStorage.getItem('addcar'));" method="post">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th width="584">商品名称</th>
                        <th width="136">商品价格</th>
                        <th width="161">购买数量</th>
                        <th width="59">操作</th>
                    </tr>
                </thead>
                <tbody>
                <c:forEach items="${list}" var="product">
                    <tr id="product_id_${product.epId}">
                        <td class="thumb">
                            <img src="${pageContext.request.contextPath}/images/product/${product.epFileName}" />
                            <a href="${pageContext.request.contextPath}/f-product/detail?epId=${product.epId}">${product.epName}</a>
                        </td>
                        <td class="price align-middle" id="price_id_${product.epId}">
                            <span>￥${product.epPrice*product.num}</span>
                            <input type="hidden" value="99" />
                        </td>
                        <td class="number align-middle">
                            <div>
                                <span><input class="w-25" id="number_id_${product.epId}" type="text" name="number" value="${product.num}" disabled="disabled"/></span>
                                <span class="col-auto" onclick="reloadPrice(${product.epId},true,${product.epStock},${product.epPrice});">+</span>
                                <span class="col-auto" onclick="reloadPrice(${product.epId},false,${product.epStock},${product.epPrice});">-</span>
                            </div>
                        </td>
                        <td class="delete align-middle"><a href="javascript:delShopping(${product.epId});">删除</a></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div class="w-100"><input class="btn btn-primary float-right" type="submit" value="下单" /></div>
        </form>
    </div>
    <div class="row text-center">
        <%@include file="common/footer.jsp"%>
    </div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/popper.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/bootstrap.min.js"></script>
</body>
<script>
    function delShopping(id){
        const temp = document.getElementById("product_id_" + id);
        temp.parentNode.removeChild(temp);
    }

    function toBuy(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";
        var opt = document.createElement("textarea");
        opt.name = "list";
        opt.value = PARAMS;
        // alert(opt.name)
        temp.appendChild(opt);
        document.body.appendChild(temp);
        temp.submit();
        return temp;
    }
    function reloadPrice(id, status,stock,price)
    {
        const addcar = localStorage.getItem("addcar");
        const list = JSON.parse(addcar);
        // var price = document.getElementById("price_id_" + id).getElementsByTagName("input")[0].value;
        var priceBox = document.getElementById("price_id_" + id).getElementsByTagName("span")[0];
        var number = document.getElementById("number_id_" + id);
        if(status==true) {
            number.value++;
            for (let i = 0;i < list.length;++i){
                if (list[i].epId==id){
                    list[i].num++;
                }
            }
            if(number.value>stock){
                alert("目前库存不足(剩余"+stock+"件)，请返回修改库存数量!");
                priceBox.innerHTML = "￥" + price * number.value;
                number.value = stock;
                number.select();
                return false;
            }
        } else if(status==false){
            if(number.value == 1) {
                priceBox.innerHTML = "￥" + price * number.value;
                return false;
            } else {
                for (let i = 0;i < list.length;++i){
                    if (list[i].epId==id){
                        list[i].num--;
                    }
                }
                number.value--;
            }
        }

        priceBox.innerHTML = "￥" + price * number.value;
        doAjax(null,"servlet/ChangeNumsAction?rnd="+Math.random()+"&ep_id="+id+"&newNums="+number.value);

    }
</script>
</html>
